<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/html">
	<head>
		<title>Vocabulary</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<link rel="stylesheet" href="styles.css" />

        <script type="text/javascript">
            function validateFormOnSubmit(theForm) {
                var reason = "";

                reason += validateWord(theForm.word);
                reason += validateMeaning(theForm.meaning);
                reason += validateSentense(theForm.sentense);


                if (reason != "")
                {
                    document.getElementById('err').innerHTML=reason;
                    return false;
                }

                return true;

            }

            function validateWord(fld)
            {
                var error = "";

                if (fld.value == "")
                {
                    fld.style.borderColor='Red';
                    error = "You didn't enter a word.<br/>";
                }
                else
                {
                    fld.style.borderColor = 'White';
                }
                return error;
            }

            function validateMeaning(fld)
            {
                var error = "";
                if (fld.value == "")
                    {
                    fld.style.borderColor='Red';
                    error = "You didn't enter a meaning.<br/>";
                }
                else
                {
                    fld.style.borderColor = 'White';
                }
                return error;
            }

            function validateSentense(fld)
            {
                var error = "";
                if (fld.value == "")
                {
                    fld.style.borderColor='Red';
                    error = "You didn't enter a Sentense.<br/>";
                }
                else
                {
                    fld.style.borderColor = 'White';
                }
                return error;
            }


        </script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <!-- The ajax/jquery stuff -->
        <script type="text/javascript">

            $(document).ready(function(){


                $("#btnsubmit").click(function(){

                    var word=$("#word").val();
                    var meaning=$("#meaning").val();
                    var sentense=$("#sentense").val();

                    $.post('submit.php', {word: word, meaning: meaning, sentense: sentense},
                        function(data){
                            $("#msg").html(data);
                            $("#msg").hide();
                            $("#msg").fadeIn(1500); //Fade in the data given by the insert.php file
                        });
                    return false;
                });
            });
        </script>


    </head>
	<body>
	<div id="conteneur">
		  <div id="header">My Vocabulary</div>

		  <div id="haut">
			<ul class="menuhaut">
				<li><a href="">OpenWebDesign</a></li>
				<li><a href="">W3C Standards</a></li>
			</ul>
		  </div>

		  <div id="centre">

                  <table summary="Demonstration form">
                      <tbody>
                      <tr>
                          <td><p id="err"></p></td>
                      </tr>
                       <form id="frm" name="myfrm" action="" onsubmit="return validateFormOnSubmit(this);">
                      <tr>
                          <td><label for="Word">Word :</label></td>
                          <td><input id="word" name="word" size="35" maxlength="50" type="text"></td>
                      </tr>
                      <tr>
                          <td><label for="Meaning">Meaning :</label></td>
                          <td><input id="meaning" name="word" size="35" maxlength="100" type="text"></td>
                      </tr>
                      <tr>
                          <td><label for="sentense">Sentense :</label></td>
                          <td><input id="sentense" name="word" size="35" maxlength="100" type="text"></td>
                      </tr>
                      <tr>
                          <td>&nbsp;</td>
                          <td><input id="btnsubmit" name="Submit" value="Send" type="submit" ></td>
                          <td>&nbsp;</td>
                      </tr>
                      </tbody>
                      </form>
                  </table>
                  </br>
                  <div id="msg"></div>

          </div>
		<div id="pied">Design by <a href="">Vishwanath Dalvi</a></div>
	</div>
	</body>
</html>
